<template>
  <div class="App">
    <MrTable
      :records.sync="records"
      :filteredRecords.sync="filteredRecords"
      :isShowDetail.sync="isShowDetail"
      :detail.sync="detail"
    ></MrTable>
    <ModalMask :isShowDetail.sync="isShowDetail" :detail.sync="detail"></ModalMask>
  </div>
</template>

<script>
import MrTable from "./components/MrTable.vue";
import ModalMask from "./components/ModalMask.vue";
export default {
  components: {
    MrTable,
    ModalMask
  },
  data() {
    return {
      records: [
        {
          date: "2022-01-01",
          doctor: "张三",
          diagnosis: "感冒",
          prescription: "感冒药"
        },
        {
          date: "2022-02-01",
          doctor: "李四",
          diagnosis: "头疼",
          prescription: "止疼药"
        },
        {
          date: "2022-03-01",
          doctor: "王五",
          diagnosis: "腰痛",
          prescription: "止痛贴"
        }
      ],
      filteredRecords: [],
      isShowDetail: false,
      detail: {}
    };
  },
  created() {
    this.filteredRecords = this.records;
  }
};
</script>

<style>
</style>